<!doctype html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head >
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style>
        html,
        body,
        table,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
    <title>圆的绘制和编辑</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="/css/plugins/jqTreeGrid/jquery.treegrid.css"
          rel="stylesheet">
    <link href="/css/plugins/summernote/summernote-0.8.8.css"
          rel="stylesheet">
</head>
<body>
<table>
    <tr>
        <td  style="width: 20%" valign="top">
            <div class="col-sm-3">
                <div class="ibox ibox-body">
                    <div class="ibox-title">
                        <h5>选择部门</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="jstree"></div>
                    </div>
                </div>
            </div>
        </td>
        <td>
            <div id="container" ></div>
            <div class="input-card" style="width: 120px">
                <button class="btn" onclick="circleEditor.open()" style="margin-bottom: 5px">开始编辑</button>
                <button class="btn" onclick="circleEditor.close()">结束编辑</button>
            </div>
            <input  type="hidden" id="deId"/>
        </td>
    </tr>
</table>
<div ></div>
<div th:include="include :: footer"></div>

<script type="text/javascript" src="/js/appjs/contract/map/fencing.js"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://webapi.amap.com/maps?v=1.4.14&key=34f702bfabb9ec6c25ade58d26cb9030&plugin=AMap.CircleEditor"></script>
<script type="text/javascript">
    var circleEditor = null;
    var map1 = null;
    function createMap(center,radius) {
        var map = new AMap.Map('container', {
            resizeEnable: true
        });
        map1 = map;
        var circle = new AMap.Circle({
            center: center,
            radius: radius, //半径
            borderWeight: 3,
            strokeColor: "#FF33FF",
            strokeOpacity: 1,
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillOpacity: 0.4,
            strokeStyle: 'dashed',
            strokeDasharray: [10, 10],
            // 线样式还支持 'dashed'
            fillColor: '#1791fc',
            zIndex: 50
        });

        circle.setMap(map);
        // 缩放地图到合适的视野级别
        map.setFitView([ circle ]);
        circleEditor = new AMap.CircleEditor(map, circle);
        circleEditor.on('end', function(event) {

            /*获取部门id*/
            var deptId = $("#deId").val();
            if(deptId == ""){
                log.success("请选择部门进行规划电子围栏");
            }else {
                /*获取半径*/
                /*alert(event.target.getRadius());*/
                /*获取中心点*/
               /* alert(event.target.getCenter());*/
                var gather = deptId+","+ event.target.getRadius()+","+event.target.getCenter();
                $.ajax({
                    type : "post",
                    url : "/system/sysDept/updateWl",
                    data : {
                        'gather' : gather
                    },
                    success : function(data) {
                        if (data.code == 0) {
                            parent.layer.msg("操作成功");
                        } else {
                            parent.layer.alert(data.msg)
                        }
                    }
                });
            }
        });
    }


    $('#jstree').on("changed.jstree", function(e, data) {
        if (data.selected != -1) {
            $("#deId").val(data.selected[0]);
            $.ajax({
                type : "post",
                url : "/contract/site/getDeptjw",
                data : {
                    'deptId' : data.selected[0]
                },
                success : function(data) {
                    if(data.dept.zhong != ""){
                        /*中心点*/
                        var jw = "["+data.dept.jing+","+data.dept.wei+"]";
                        var center = eval("("+ jw+")");
                        /*半径*/
                        var radius = data.dept.zhong;
                        /*重置地图*/
                        createMap(center,radius);
                    }else {

                        createMap(map1.getCenter(),100);
                    }
                }
            });
        }
    });


</script>

</body>
</html>